<template>
  <div class="user-info-container">
    <div class="page-header">
      <h2 class="page-title">用户信息管理</h2>
    </div>

    <div class="table-container">
      <el-table
        :data="userList"
        border
        stripe
        class="user-table"
        header-row-class-name="table-header"
      >
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="realName" label="真实姓名" min-width="120" />
        <el-table-column prop="email" label="邮箱" min-width="180" />
        <el-table-column prop="phone" label="手机号" min-width="130" />
        <el-table-column prop="roleId" label="角色" min-width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.roleId === 1" type="success" size="small">管理员</el-tag>
            <el-tag v-else-if="scope.row.roleId === 2" type="warning" size="small">发行商</el-tag>
            <el-tag v-else-if="scope.row.roleId === 3" type="primary" size="small">店铺</el-tag>
            <el-tag v-else-if="scope.row.roleId === 4" type="info" size="small">游客</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" min-width="160" />
        <el-table-column prop="updatedTime" label="更新时间" min-width="160" />
        <el-table-column label="操作" width="260" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button type="primary" size="small" plain @click="openEditUserDialog(scope.row)">
                编辑
              </el-button>
              <el-button type="danger" size="small" plain @click="handleDelete(scope.row)">
                删除
              </el-button>
              <el-button type="warning" size="small" plain @click="resetPassword(scope.row)">
                重置密码
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" v-model="editUserDialogVisible" width="50%">
      <el-form :model="editUserInfo" label-position="right" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editUserInfo.username" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="editUserInfo.realName" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editUserInfo.email" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editUserInfo.phone" />
        </el-form-item>
        <el-form-item label="分配角色">
          <el-radio-group v-model="editUserInfo.roleId">
            <el-radio :label="1">管理员</el-radio>
            <el-radio :label="2">发行商</el-radio>
            <el-radio :label="3">店铺</el-radio>
            <el-radio :label="4">游客</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="editUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleUpdateUserInfo">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAllUsersAPI, updateUserAPI, deleteUserAPI } from '@/api/user'

onMounted(() => {
  getAllUserInfo()
})
const userList = ref([])
const getAllUserInfo = async () => {
  const { data: res } = await getAllUsersAPI()
  if (res.code !== 1) {
    ElMessage.error(res.msg || '获取用户信息失败')
    return
  }
  userList.value = res.data
}

const editUserDialogVisible = ref(false)
const editUserInfo = ref({})
const openEditUserDialog = (row) => {
  console.log('row', row)
  editUserInfo.value = row
  editUserDialogVisible.value = true
}

// 更新用户信息
const updateUserInfo = async (data: updateUserParams) => {
  const { data: res } = await updateUserAPI(data)
  if (res.code !== 1) {
    ElMessage.error(res.msg || '更新用户信息失败')
    return
  }
  ElMessage.success(res.msg || '更新用户信息成功')
  getAllUserInfo()
}

const resetPassword = (row) => {
  console.log('resetPassword', row)
  ElMessageBox.confirm('此操作将重置该用户的密码为123456, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            id: row.id,
            username: row.username,
            realName: row.realName,
            email: row.email,
            phone: row.phone,
            roleId: row.roleId,
            avatar: row.avatar,
            password: '123456'
          }
          console.log('data', data)
          updateUserInfo(data)
          ElMessage({
            type: 'success',
            message: '密码重置成功!'
          });
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消重置'
          });
        });
}

// 点击编辑确定按钮
const handleUpdateUserInfo = () => {
  console.log('handleUpdateUserInfo', editUserInfo.value)
  const data = {
    id: editUserInfo.value.id,
    username: editUserInfo.value.username,
    realName: editUserInfo.value.realName,
    email: editUserInfo.value.email,
    phone: editUserInfo.value.phone,
    roleId: editUserInfo.value.roleId,
    avatar: editUserInfo.value.avatar,
  }
  console.log('data', data)
  updateUserInfo(data)
  editUserDialogVisible.value = false
}

// 删除用户
const deleteUser = async (id: number) => {
  const { data: res } = await deleteUserAPI(id)
  if (res.code !== 1) {
    ElMessage.error(res.msg || '删除用户失败')
    return
  }
  ElMessage.success(res.msg || '删除用户成功')
  getAllUserInfo()
}

const handleDelete = (row) => {
  console.log('handleDelete', row)
  ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser(row.id)
        }).catch(() => {
          ElMessage.info('已取消删除')
        });
}
</script>

<style scoped>
.user-info-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #303133;
}

.table-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-table {
  width: 100%;
  font-size: 14px;
}

/* 表格头部样式 */
:deep(.table-header) {
  background-color: #f5f7fa !important;
}

:deep(.table-header th) {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: 500;
  border-bottom: 1px solid #e4e7ed;
}

/* 表格行样式 */
:deep(.el-table__row) {
  transition: background-color 0.2s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

/* 表格边框样式 */
:deep(.el-table) {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
}

:deep(.el-table th) {
  border-bottom: 1px solid #e4e7ed;
  padding: 12px 0;
}

/* 角色标签样式 */
:deep(.el-tag) {
  border-radius: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border: none;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

:deep(.action-buttons .el-button) {
  border-radius: 4px;
  font-size: 12px;
  padding: 5px 12px;
  transition: all 0.2s ease;
}

:deep(.action-buttons .el-button:hover) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-container {
    padding: 16px;
  }

  .page-title {
    font-size: 20px;
  }

  .table-container {
    padding: 16px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  :deep(.action-buttons .el-button) {
    width: 60px;
    font-size: 11px;
    padding: 4px 8px;
  }
}
</style>
